<template>
  <div class="main-box scroll">
    <div class="table-box">
      <el-tabs v-model="activeName" tab-position="bottom" class="demo-tabs">
        <el-tab-pane label="工单监控" name="ticket">
          <ProTable
            v-if="activeName === 'ticket'"
            ref="proTable"
            title="工单监控"
            highlight-current-row
            :columns="TicketColumns"
            :request-api="getTableList"
            :pagination="true"
            :show-summary="false"
            :init-param="initParam"
            :indent="20"
            :search-col="{ xs: 1, sm: 1, md: 2, lg: 4, xl: 4 }"
          >
          </ProTable>
        </el-tab-pane>
        <el-tab-pane label="账单监控" name="bill">
          <ProTable
            v-if="activeName === 'bill'"
            ref="proTable"
            title="账单监控"
            highlight-current-row
            :columns="billColumns"
            :request-api="getTableList"
            :pagination="true"
            :show-summary="false"
            :init-param="initParam"
            :indent="20"
            :search-col="{ xs: 1, sm: 1, md: 2, lg: 4, xl: 4 }"
          >
          </ProTable>
        </el-tab-pane>
        <!--        <el-tab-pane label="流程监控" name="process">-->
        <!--          <ProTable-->
        <!--            v-if="activeName === 'process'"-->
        <!--            ref="proTable"-->
        <!--            title="流程监控"-->
        <!--            highlight-current-row-->
        <!--            :columns="billColumns"-->
        <!--            :request-api="getBillList"-->
        <!--            :pagination="true"-->
        <!--            :show-summary="false"-->
        <!--            :init-param="initParam"-->
        <!--            :indent="20"-->
        <!--            :search-col="{ xs: 1, sm: 1, md: 2, lg: 4, xl: 4 }"-->
        <!--          >-->
        <!--          </ProTable>-->
        <!--        </el-tab-pane>-->
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts" name="operationMonitor">
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Role } from "@/api/interface/roleManagement";
import { reactive, ref } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import {
  getTicketList,
  getBillList,
  getTicketTypes,
  getResourceTypes,
  getVdcProjectList
} from "@/api/modules/monitorManagement/operationManagement";
// ProTable 实例
const activeName = ref("ticket");
const proTable = ref<ProTableInstance>();
// 列表API
const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.created_time && (newParams.start_time = newParams.created_time[0]);
  newParams.created_time && (newParams.end_time = newParams.created_time[1]);
  delete newParams.created_time;
  switch (activeName.value) {
    case "ticket":
      return getTicketList(newParams);
      break;
    case "bill":
      return getBillList(newParams);
      break;
    default:
      return getTicketList(newParams);
  }
};
// 表格配置项
const TicketColumns = reactive<ColumnProps<Role.ResRoleList>[]>([
  { type: "index", label: "#", width: 80 },
  {
    prop: "ticket_type",
    label: "工单类型",
    search: {
      el: "select"
    },
    enum: async () => {
      let { data } = await getTicketTypes();
      const arr = data.map(item => {
        return {
          label: item,
          value: item
        };
      });
      return { data: arr };
    },
    width: 150
  },
  {
    prop: "todayTicket",
    label: "当日工单",
    _children: [
      { prop: "ticket_count_today", label: "工单总数", minWidth: 200 },
      { prop: "ticket_not_handled_count_today", label: "未处置工单数", minWidth: 200 },
      { prop: "ticket_not_handled_persons_count_today", label: "未处置经办人", minWidth: 200 },
      { prop: "ticket_handle_today_average_duration", label: "平均处置时间", minWidth: 200 }
    ]
  },
  {
    prop: "monthyTicket",
    label: "当月工单",
    _children: [
      { prop: "ticket_count_month", label: "工单总数", minWidth: 200 },
      { prop: "ticket_not_handled_count_month", label: "未处置工单数", minWidth: 200 },
      { prop: "ticket_not_handled_persons_count_month", label: "未处置经办人", minWidth: 200 },
      { prop: "ticket_handle_month_average_duration", label: "平均处置时间", minWidth: 200 }
    ]
  },
  {
    prop: "created_time",
    label: "最近修改时间",
    search: {
      el: "date-picker",
      props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" },
      span: 2,
      label: "时间范围"
    },
    width: 200
  }
]);
// const c1 = reactive<ColumnProps<Role.ResRoleList>[]>([
//   { prop: "name", label: "系统名称", minWidth: 200 },
//   { prop: "no", label: "未处置告警", minWidth: 200 },
//   { prop: "important", label: "未处置重点关注告警", minWidth: 200 },
//   { prop: "time", label: "告警处理平均耗时", minWidth: 200 },
//   { prop: "update_at", label: "最新修改时间", search: { el: "input", label: "时间范围" }, width: 200 }
// ]);
const billColumns = reactive<ColumnProps<Role.ResRoleList>[]>([
  { type: "index", label: "#", width: 80 },
  {
    prop: "resource_type",
    label: "资源对象",
    search: { el: "select" },
    enum: async () => {
      let { data } = await getResourceTypes();
      const arr = data.map(item => {
        return {
          label: item,
          value: item
        };
      });
      return { data: arr };
    },
    width: 150
  },
  {
    prop: "vdc_project",
    label: "VDC/项目",
    search: { el: "select" },
    enum: async () => {
      let { data } = await getVdcProjectList();
      const arr = data.map(item => {
        return {
          label: item,
          value: item
        };
      });
      return { data: arr };
    },
    minWidth: 200
  },
  { prop: "application", label: "应用", width: 200 },
  { prop: "bill_period", label: "账期", search: { el: "input" }, width: 200 },
  { prop: "today_cost", label: "当日费用（元）", width: 200 },
  { prop: "month_cost", label: "当月费用（元）", width: 200 },
  {
    prop: "created_time",
    label: "最近修改时间",
    search: {
      el: "date-picker",
      props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" },
      span: 2,
      label: "时间范围"
    },
    width: 200
  }
]);
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({});
</script>

<style lang="scss" scoped>
@import "index";
.main-box {
  flex-direction: row;
  height: 100%;
  :deep(.table-box) {
    .el-tabs__header {
      padding: 10px 18px;
      padding-bottom: 0;
      margin-top: 0;
    }
  }
  &-left {
    display: flex;
    width: 250px;
    margin-right: 10px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 0 8px 0 #e6e6e6;
  }
  &-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
  }
}
</style>
